{% load static %}
<div class="changeWallpaper" id="changewallpaper" onclick="bg_random()"></div>
<style>
    .changeWallpaper {
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        --antd-wave-shadow-color: #1890ff;
        color: rgba(0, 0, 0, 0.65);
        font-variant: tabular-nums;
        line-height: 1.5;
        font-feature-settings: 'tnum';
        -webkit-font-smoothing: antialiased;
        font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
        --glass-blur: 10px;
        --glass-bgColor: rgba(255, 255, 255, 0.6);
        user-select: none;
        font-size: 0;
        text-align: right;
        box-sizing: border-box;
        width: 40px;
        height: 40px;
        margin-right: 16px;
        border-radius: 50%;
        display: inline-block;
        background-color: rgba(0, 0, 0, 0.2);
        background-size: 100%;
        background-repeat: no-repeat;
        cursor: pointer;
        transition: all 0.4s;
        background-image: url({% static 'Fantasy/img/change-bg.png' %});
    }


</style>
<script>
    var index_ = 0;

    function random(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
    }

    function bg_random() {
        var changewallpaper = document.getElementById("ali-logo");
        if (changewallpaper) {
            changewallpaper.remove();
        }

        var path = "{% static 'Fantasy/wallpaper' %}" + '/'

        var items = ["fog.jpg", "bg.jpg"];
        var number = random(0, items.length)
        var picture = path + items[number]
        document.body.style.backgroundImage = "url(" + picture + ")";
        document.body.style.backgroundRepeat = "no-repeat";
        document.body.style.backgroundAttachment = "fixed";
        document.body.style.backgroundSize = "100%";
    }
</script>
</html>